<template>
  <el-dialog
    :title="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
    :close-on-click-modal="false"
    :visible.sync="visible"
    class="JADP-dialog JADP-dialog_center"
    lock-scroll
    width="700px"
  >
    <el-row :gutter="15" class="">
      <el-form
        ref="elForm"
        :model="dataForm"
        :rules="rules"
        size="small"
        label-width="100px"
        label-position="right"
        :disabled="!!isDetail"
      >
        <el-col :span="24">
          <el-form-item label="学员姓名" prop="stuname" label-width="120px">
            <el-input
              v-model="dataForm.stuname"
              placeholder="请输入"
              readonly
              @click.native="stuClick"
              :style="{ width: '100%' }"
            >
              <template slot="append">
                <el-button type="primary" @click.stop="stuClick"
                  >选择学员</el-button
                ></template
              >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="证书名称"
            prop="certificatename"
            label-width="120px"
          >
            <el-input
              v-model="dataForm.certificatename"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="证书编号"
            prop="serialnumber"
            label-width="120px"
          >
            <el-input
              v-model="dataForm.serialnumber"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="证书扫描件"
            prop="certificatecover"
            label-width="120px"
          >
            <JADP-UploadImg
              v-model="certificatecoverList"
              :fileSize="500"
              sizeUnit="MB"
              :limit="10"
            >
            </JADP-UploadImg>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="资格类型"
            prop="certificateclassification"
            label-width="120px"
          >
            <JADP-TreeSelect
              v-model="dataForm.certificateclassification"
              :options="treeData"
              placeholder="选择分类"
              style="width: 100%"
              @change="modChange"
            />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="操作项目"
            prop="actThing"
            label-width="120px"
            v-if="moxs"
            ref="actTitle"
          >
            <el-input
              v-model="dataForm.actThing"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
              v-if="moxs"
              ref="actText"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="证书机构"
            prop="licensingagency"
            label-width="120px"
          >
            <el-input
              v-model="dataForm.licensingagency"
              placeholder="请输入"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="发证时间" prop="issuetime" label-width="120px">
            <el-date-picker
              v-model="dataForm.issuetime"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              format="yyyy-MM-dd"
              value-format="timestamp"
              type="date"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="下次复审时间"
            prop="reviewtime"
            label-width="120px"
          >
            <el-date-picker
              v-model="dataForm.reviewtime"
              placeholder="请选择"
              clearable
              :style="{ width: '100%' }"
              format="yyyy-MM-dd"
              value-format="timestamp"
              type="date"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item
            label="证书描述"
            prop="certificatedescription"
            label-width="120px"
          >
            <el-input
              v-model="dataForm.certificatedescription"
              placeholder="请输入"
              :style="{ width: '100%' }"
              true
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="!isDetail"
        >确 定</el-button
      >
    </span>
    <StuTable
      v-if="stuTableBlo"
      ref="teacherList"
      @determine="determineTeacherList"
      @stuTableE="stuTableE"
    />
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import ExportBox from "./ExportBox";
import StuTable from "./stuTable.vue";
// import { login } from '@/api/user';
export default {
  components: { ExportBox, StuTable },
  props: [],
  data() {
    return {
      stuTableBlo: false,
      loading: false,
      visible: false,
      isDetail: false,
      activeName: "",
      moxs : false,
      dataForm: {
        id: undefined,
        stuname: "",
        StuId: "",
        issuetime: "",
        reviewtime: "",
        creatoruserid: "",
        lastmodifyuserid: "",
        creatortime: "",
        lastmodifytime: "",
        certificatename: undefined,
        serialnumber: undefined,
        ordeanddegree: "",
        certificatefixednumberofyear: undefined,
        certificatecover: [],
        certificateclassification: "",
        licensingagency: undefined,
        certificatedescription: undefined,
        actThing: "",
        organizeId:"",
      },
      rules: {
        stuname: [
          {
            required: true,
            message: "请选择",
            trigger: "blur"
          }
        ],
        certificatename: [
          {
            required: true,
            message: "请输入",
            trigger: "change"
          }
        ],
        serialnumber: [
          {
            required: true,
            message: "请输入",
            trigger: "change"
          }
        ],
        certificateclassification: [
          {
            required: true,
            message: "请选择",
            trigger: "blur"
          }
        ],
        actThing: [
          {
            required: true,
            message: "请输入",
            trigger: "blur"
          }
        ],
        licensingagency: [
          {
            required: true,
            message: "请输入",
            trigger: "change"
          }
        ],
        reviewtime: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ]
      },
      certificatecoverList: [],
      certificatecover: [],
      treeData: []
    };
  },
  computed: {
  },
  watch: {},
  created() {
    this.getTreeData();
  },
  mounted()
{
},
  methods: {
    //学员table
    stuClick() {
      this.stuTableBlo = true;
      this.$nextTick(() => {
        this.$refs.teacherList.teacherVisible = true;
      });

      // request({
      //   url: "api/students/Xy_ks_students/getStulist",
      //   method: "get"
      // }).then(res => {
      //   console.log(res, "resres");
      // });
    },
    determineTeacherList(val) {
      // console.log(val, "val");
      this.dataForm.stuname = val.realname;
      this.dataForm.StuId = val.stuid;
      // this.dataForm.stuid = val.stuid;
    },
    stuTableE(ble) {
      // console.log(ble, "ble");
      this.stuTableBlo = ble;
    },
    init(id, isDetail) {
      this.certificatecoverList = [];
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url:
              `/api/certificatemanagement/Xy_ks_certificatemanagement/${this.dataForm.id}?organizeId=${this.$store.getters.organizeId}`,
            method: "get"
          }).then(res => {
            this.dataForm = res.data;
            //渲染前给是否显示赋值，用于编辑页面
            if(this.dataForm.certificateclassification==='05'){
              this.moxs=true;
            }else{
              this.moxs=false;
            }
            this.certificatecoverList = this.dataForm.certificatecover
              ? JSON.parse(this.dataForm.certificatecover)
              : [];
            this.loading = false;
          });
        }
      });
    },
    getTreeData() {
      request({
        url: `/api/xy_ks_cer_type/Xy_ks_cer_type/getTreeList?organizeId=${this.$store.getters.organizeId}`,
        method: "get"
      }).then(res => {
        let topItem = {
          fullName: "资格类型",
          hasChildren: true,
          id: "-1",
          icon: "icon-ym icon-ym-tree-organization3",
          children: res.data
        };
        this.treeData = [topItem];
      });
    },
    // 表单提交
    dataFormSubmit() {
      // console.log(this.dataForm, "this.dataForm");
      this.$set(
        this.dataForm,
        "certificatecover",
        this.certificatecoverList.length
          ? JSON.stringify(this.certificatecoverList)
          : ""
      );
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          this.dataForm.organizeId = this.$store.getters.organizeId;
          if (!this.dataForm.id) {
            request({
              url: `/api/certificatemanagement/Xy_ks_certificatemanagement`,
              method: "post",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  (this.visible = false), this.$emit("refresh", true);
                }
              });
            });
          } else {
            request({
              url:
                "/api/certificatemanagement/Xy_ks_certificatemanagement/" +
                this.dataForm.id,
              method: "PUT",
              data: this.dataForm
            }).then(res => {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 1000,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refresh", true);
                }
              });
            });
          }
        }
      });
    },
    modChange(innerValue){
      if(innerValue=="05"){
        this.moxs=true;
      }else{
        this.moxs=false;
      }
    }
  }
};
</script>
